<template>
	<view class="index">
		<view class="index-order">
			<view class="index-order-list" :key="item.id" v-for="(item,index) in orderList">
				<view class="product">
					<view class="product-left-name">
						型号：<text class="product-name-border">{{item.marking||''}}</text>
					</view>
					<view class="product-left-name">
						序列号：<text class="product-name-border">{{item.serial||''}}</text>
					</view>
					<view class="product-left-name">
						<view class=""> 图片：</view>
						<image v-for="(img, k) in item.express_images" :key="k" :src="img"
							@click="preview(k, item.express_images)" />
					</view>
				</view>
			</view>
			<empty v-if="orderList.length==0"></empty>

		</view>
	</view>
</template>

<script>
	import base from '@/request/request.js'
	import empty from '../../components/empty.vue'
	import changetype from '../../utils/changetype.js'
	export default {
		components: {
			empty
		},
		data() {
			return {
				beaeUrl: base.imgUrl,
				orderList: [], 
				last_page: 1, //
				queryParams: {
					equipment_name: '',
					page: 1,
				},
				equipment_id:null
			}
		},
		onLoad(e) {
			this.equipment_id = e.id
			
		},
		onShow() {
			this.init()
			this.getIndexInfo()
		},
		methods: {
			init() {
				this.orderList = []
				this.queryParams.page = 1
			},
			getIndexInfo() {
				this.$https.post('/hospital/getEquipAttachmentList', {
					equipment_id: this.equipment_id
				}).then(res => {
					if (res.code == 1) {
						this.orderList = res.data.map(item => {
							return {
								...item,
								express_images: item.images ? item.images.split(',') : []
							}
						})
					}
				})
			},
			preview(current, urls) {
				uni.previewImage({
					current,
					urls,
				});
			},
		},
		
		onReachBottom() {
			if (this.queryParams.page != this.last_page) {
				this.queryParams.page++
				this.getIndexInfo()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content-input {
		flex: 1;
		display: flex;
		font-size: 28rpx;
		align-items: center;
		height: 36rpx;
		background: #FFFFFF;
		border-radius: 44rpx;
		display: flex;
		padding: 20rpx 24rpx 20rpx 30rpx;
		display: flex;
		align-items: center;

		image {
			width: 46rpx;
			height: 44rpx;
			margin-right: 0;
		}

		input {
			flex: 1;
		}
	}


	.product {
		border-top: 2rpx solid #f6f6fb;
		border-bottom: 2rpx solid #f6f6fb;
		padding-bottom: 20rpx;

		&-left {
			flex: 1;
			padding-left: 10px;

			&-name {
				font-size: 26rpx;
				font-weight: 400;
				color: #969699;
				margin: 16rpx 0 0;
				align-items: center;
				display: flex;
				justify-content: flex-start;
				image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
				}

				&-border {
					color: #303030;
					font-weight: 500;
				}
			}
		}

		&-right {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			width: 100px;

			.btn {
				height: 60rpx;
				line-height: 60rpx;
				padding: 0rpx 48rpx;
				background-color: #1aad19;
				color: #FFFFFF;
				font-size: 28rpx;
				border-radius: 52rpx;
				margin-bottom: 6px;
				border: 0;
			}

			.hiddenBtn {
				display: none;
			}
		}
	}

	.order-time {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0rpx;

		&-left {
			font-size: 24rpx;
			font-weight: 400;
			color: #646466;
		}

		&-right {
			padding: 12rpx 48rpx;
			background-color: $public-oclor;
			color: #FFFFFF;
			font-size: 28rpx;
			border-radius: 52rpx;
		}
	}

	.uni-margin-wrap {
		width: 680rpx;
		width: 100%;
	}

	.swiper {
		height: 60rpx;
	}

	.swiper-item {
		display: block;
		height: 60rpx;
		line-height: 60rpx;
		text-align: left;
		font-size: 36rpx;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.index {
		position: relative;

		&-order {
			min-height: 100vh !important;
			padding: 16rpx 32rpx;
			position: relative;
			top: 0;
			overflow: hidden;
			background-color: #F5F6F8;
			padding-bottom: 40rpx;

			.detail-top {
				display: flex;
				justify-content: space-between;
				padding: 26rpx 0 22rpx;
			}

			.left-name {
				font-size: 32rpx;
				font-weight: 600;
				color: #303030;
			}

			.right-name {
				font-size: 28rpx;
				font-weight: 500;
				color: #FFAB00;
				letter-spacing: 4rpx;
			}

			&-list {
				position: relative;
				padding: 0 26rpx;
				margin: 0rpx 0 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background-color: #FFFFFF;
				border-radius: 16rpx;

				&-title {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					line-height: 33rpx;
				}

				&-msg {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #666F80;
					line-height: 33rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				&-sign {
					position: absolute;
					top: 52rpx;
					right: 20rpx;
					width: 12rpx;
					height: 12rpx;
					background-color: #FF3507;
					border-radius: 50%;
					z-index: 999999999999;
				}
			}


			&-work {
				display: flex;
				padding: 10rpx 0 36rpx;
				justify-content: space-around;

				&-item {
					text-align: center !important;
					width: 46%;
					font-size: 28rpx;
					font-weight: 400;
					color: #969699;
					line-height: 48rpx;
				}
			}

			.active {
				font-size: 36rpx;
				font-weight: 550;
				color: #141414;
				line-height: 48rpx;
				position: relative;
			}

			.active::before {
				content: '';
				width: 100rpx;
				height: 8rpx;
				border-radius: 8rpx;
				background-color: $public-oclor;
				position: absolute;
				bottom: -16rpx;
				left: 38%;
				margin-left: -30rpx;
			}

			.active::after {
				content: '';
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background-color: $public-oclor;
				position: absolute;
				bottom: -16rpx;
				left: 38%;
				margin-left: -40rpx;
			}

			&-head {
				padding: 40rpx 32rpx 28rpx;
				background: linear-gradient(180deg, rgba(26, 102, 255, 0.3) 0%, rgba(245, 246, 248, 0) 100%);
				display: flex;
				justify-content: space-between;

				&-left {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					line-height: 33rpx;

					&-right {
						display: flex;
						align-items: center;
					}
				}

				&-right {
					&-a {
						font-size: 24rpx;
						font-weight: 500;
						color: #979797;
						line-height: 28rpx;
						letter-spacing: 8rpx;
					}

					&-icon {}
				}
			}
		}

		&-top {
			background-color: $public-oclor;
			padding: 170rpx 34rpx 78rpx;

			&-icon {
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			&-avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&-nick {
				color: #fff;
				margin-left: 30rpx;
				font-size: 32rpx;
			}

			&-name {
				margin: 22rpx 0 20rpx;
				font-weight: 600;
				color: #FFFFFF;
				font-size: 40rpx;
				overflow-x: scroll;
				overflow-y: hidden;
				white-space: nowrap;
				width: 100%;
			}

			&-hospilal {
				font-weight: 500;
				color: rgba(255, 255, 255, 0.7);
				line-height: 33rpx;
				font-size: 28rpx;
			}

			&-order {
				margin-top: 20rpx;
				height: 140rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				justify-content: center;
				align-items: center;

				&-item:nth-child(2) {
					border-left: 2rpx solid rgba(255, 255, 255, 0.2);
					border-right: 2rpx solid rgba(255, 255, 255, 0.2);
				}

				&-item {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					flex: 1;
					height: 100%;

					&-name {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 0.6);
						line-height: 32rpx;
						letter-spacing: 8rpx;
					}

					&-num {
						font-size: 48rpx;
						font-weight: 540;
						color: #FFFFFF;
					}
				}
			}
		}


		&-bgcImg {
			position: absolute;
			z-index: 99;
			top: 0px;
			right: 0px;
			width: 384rpx;
			height: 368rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>